<script setup>
import { ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    Search
} from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'
</script>

<template>
    <div class="common-layout">
        <el-container>
            <!-- aside -->
            <el-aside classs="aside">
                <div class="img">
                    <img src="../../assets/image/Group 5@2x.png" alt="">
                </div>
                <div class="aside_b">
                    <img src="../../assets/image/Frame@2x.png" alt="">
                    <span>担保交易</span>
                    <img src="../../assets/image/Frame@2x(1).png" alt="">
                    <span>安全无忧</span>
                </div>
                <div class="btn">
                    <el-button type="primary" style="width: 168px;height: 36px;">
                        <!-- <img src="../../assets/image/" alt=""> -->
                        <el-icon>
                            <location />
                        </el-icon>
                        我要卖
                    </el-button>
                </div>
                <!-- 左侧导航 -->
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-menu-item index="1">
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>卖家中心</span>
                    </el-menu-item>
                    <!-- 自抽号管理 -->
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><icon-menu /></el-icon>
                            <span>自抽号管理</span>
                        </template>
                        <el-menu-item index="1-1">商品管理</el-menu-item>
                        <el-menu-item index="1-2">订单管理</el-menu-item>
                        <el-menu-item index="1-3">库存管理</el-menu-item>
                    </el-sub-menu>
                    <!-- 初始号管理 -->
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon><icon-menu /></el-icon>
                            <span>初始号管理</span>
                        </template>
                        <el-menu-item index="1-1">游戏列表</el-menu-item>
                        <el-menu-item index="1-2">库存管理</el-menu-item>
                        <el-menu-item index="1-3">订单管理</el-menu-item>
                    </el-sub-menu>
                    <!-- 账户余额 -->
                    <el-menu-item index="4">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>账户余额</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container class="container">
                <!-- header -->
                <el-header class="header">
                    <div class="header_left">
                        <div class="list">
                            <span>初始号 &nbsp;游戏列表</span>
                        </div>
                        <div class="all">
                            <span>全部</span>
                            <span>寄售</span>
                            <span>担保</span>
                        </div>
                    </div>
                </el-header>

                <!-- main -->
                <el-main class="main">
                    <div class="change">
                        <!-- 表单 -->
                        <div class="c_id">
                            <el-form :inline="true" class="demo-form-inline">
                                <el-form-item label="库存ID">
                                    <el-input placeholder="请输入" clearable />
                                </el-form-item>
                                <el-form-item label="游戏名称">
                                    <el-select placeholder="请选择" clearable style="width: 200px;">
                                        <el-option label="Zone one" value="shanghai" />
                                        <el-option label="Zone two" value="beijing" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="发货方式">
                                    <el-select placeholder="请选择" clearable style="width: 200px;">
                                        <el-option label="Zone one" value="shanghai" />
                                        <el-option label="Zone two" value="beijing" />
                                    </el-select>
                                </el-form-item>
                                <!-- 日期选择器 -->
                                <el-form-item label="交易时间">
                                    <el-date-picker style="width: 200px;" type="daterange" start-placeholder="开始"
                                        end-placeholder="结束"
                                        :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                                </el-form-item>
                                <el-form-item style="width: 200px;" label="公开">
                                    <el-select placeholder="请选择" clearable style="width: 200px;">
                                        <el-option label="Zone one" value="shanghai" />
                                        <el-option label="Zone two" value="beijing" />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="c_pirce">
                            <el-form :inline="true" class="demo-form-inline">
                                <el-form-item style="width: 200px;" label="降价">
                                    <el-select placeholder="全部" clearable style="width: 200px;">
                                        <el-option label="Zone one" value="shanghai" />
                                        <el-option label="Zone two" value="beijing" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item style="width: 200px;" label="状态">
                                    <el-select placeholder="全部" clearable style="width: 200px;">
                                        <el-option label="Zone one" value="shanghai" />
                                        <el-option label="Zone two" value="beijing" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="交易时间">
                                    <el-date-picker style="width: 519px;" type="daterange" start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                                </el-form-item>
                                <!-- 搜索/重置 -->
                                <el-button type="primary">
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                    搜索
                                </el-button>
                                <el-button>重置</el-button>
                            </el-form>
                        </div>
                    </div>
                    <!-- 刷新/新增按钮 -->
                    <el-button>
                        刷新
                    </el-button>
                    <el-button type="primary">+ 新增</el-button>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<style lang="scss" scoped>
.common-layout {
    width: 1920px;
    height: 1101px;
    background-color: #F0F2F5;

    .aside {
        width: 200px;
        height: 1081px;
        float: left;
        margin-top: 10px;
        margin-left: 10px;
        border-radius: 10px;
        background-color: #FFFFFF;

        .img {
            width: 200px;
            height: 70px;

            img {
                width: 112px;
                height: 33px;
                margin-top: 10px;
                margin-left: 20px;
            }
        }

        .aside_b,
        .btn {
            width: 200px;
            height: 68px;
            text-align: center;
        }

        .aside_b {
            img {
                width: 14px;
                height: 14px;
                margin-left: 10px;
            }

            span {
                width: 40px;
                height: 14px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 10px;
                color: #4A9AFD;
                text-align: left;
                margin-left: 4px;
            }
        }

        .menu {
            width: 200px;
            height: 942px;
            background-color: #976262;
        }
    }

    .container {
        width: 1690px;
        height: 1044px;
        // background-color: #d7e4f1;
        float: left;
        margin-top: 10px;
        margin-left: 10px;

        .header {
            width: 1690px;
            height: 110px;
            background-color: #FFFFFF;
            float: left;
            border-radius: 10px;

            .header_left {
                width: 231px;
                height: 100px;
                margin-top: 10px;
                margin-left: 20px;

                .list {
                    width: 170px;
                    height: 44px;

                    span {
                        font-size: 20px;
                        color: #333333;
                    }
                }

                .all {
                    width: 226px;
                    height: 46px;
                    margin-top: 10px;
                    line-height: 46px;
                    display: flex;
                    flex-wrap: wrap;
                    display: -webkit-flex;

                    span {
                        flex: 1;
                    }
                }
            }
        }

        .change {
            width: 1608px;
            height: 136px;
            background-color: #FFFFFF;
            float: left;
            margin-top: 29px;
            border-radius: 10px;

            .c_id,
            .c_pirce {
                width: 1582px;
                height: 32px;
                // background-color: #dea5a5;
                /* margin-top: 24px;
                margin-left: 24px; */
                margin: 24px 0 0 24px;
            }
        }

        .main {
            width: 1608px;
            height: 759px;
            background-color: #FFFFFF;
            float: left;
            margin-top: 10px;
            border-radius: 10px;
        }
    }


}
</style>